<template>
  <div>
    <div class="nav">
      <router-link to="/parent/view-letter">查看信件</router-link>
      <router-link to="/parent/chat">对话沟通</router-link>
      <router-link to="/parent/more-features">更多功能</router-link>
      <router-link to="/">退出登录</router-link>
    </div>
    <div class="container">
      <h3>学生成绩查询</h3>
      <div class="card">
        <div class="semester-selector">
          <label for="semester">选择学期：</label>
          <select id="semester" v-model="semester">
            <option value="2024-2025-1">2024-2025学年第一学期</option>
            <option value="2024-2025-2">2024-2025学年第二学期</option>
          </select>
        </div>
        <table class="grade-table">
          <thead>
            <tr>
              <th>科目</th>
              <th>期中成绩</th>
              <th>期末成绩</th>
              <th>总评成绩</th>
              <th>班级排名</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, idx) in grades" :key="idx">
              <td>{{ row.subject }}</td>
              <td>{{ row.mid }}</td>
              <td>{{ row.final }}</td>
              <td>{{ row.total }}</td>
              <td>{{ row.rank }}</td>
            </tr>
          </tbody>
        </table>
        <div class="average-grade">
          平均成绩：{{ avgGrade }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ParentGradeQuery',
  data() {
    return {
      semester: '2024-2025-2',
      grades: [
        { subject: '语文', mid: 88, final: 92, total: 90, rank: 12 },
        { subject: '数学', mid: 95, final: 98, total: 97, rank: 5 },
        { subject: '英语', mid: 85, final: 87, total: 86, rank: 18 },
        { subject: '物理', mid: 90, final: 91, total: 90.5, rank: 10 },
        { subject: '化学', mid: 87, final: 93, total: 90, rank: 15 }
      ]
    }
  },
  computed: {
    avgGrade() {
      if (!this.grades.length) return 0;
      const sum = this.grades.reduce((acc, cur) => acc + Number(cur.total), 0);
      return (sum / this.grades.length).toFixed(1);
    }
  }
}
</script>
<style scoped>
@import '../../../css/style.css';
.semester-selector { margin-bottom: 20px; }
.grade-table { width: 100%; border-collapse: collapse; }
.grade-table th, .grade-table td { padding: 10px; border: 1px solid #ddd; text-align: center; }
.grade-table th { background-color: #f5f5f5; }
.average-grade { margin-top: 20px; text-align: right; font-weight: bold; }
</style> 